import styles from './index.less';
import React from "react";
import ReactDOM from "react-dom";

let circleDiv = null;
let timeoutId = null;

/**
 * 显示节点
 * @param text
 * @param duration
 */
export const show = (text, duration = 1800) => {
  createElement(text);
  timeoutId = setTimeout(removeElement, duration);
}

/**
 * 新建节点
 */
const createElement = text => {
  const divStyle = text.length === 1 ? styles.cir1 : styles.cir2;
  let node = React.createElement('div', {className: divStyle}, text);
  // 节点存在时覆盖
  removeElement();
  // 创建新节点
  circleDiv = document.createElement("div");
  document.body.appendChild(circleDiv);
  ReactDOM.render(node, circleDiv);
}

/**
 * 移除元素
 */
const removeElement = () => {
  if (circleDiv) {
    document.body.removeChild(circleDiv);
    circleDiv = null;
    clearTimeout(timeoutId);
    timeoutId = null;
  }
}
